<template>
	<view>
	<view class="gt-form-item">
		<view v-if="label" class="gt-form-label-group">
			<view class="row">
				<view class="gt-form-label-left"></view>
				<view v-if="required" class="gt-form-required">*</view>
				<view class="gt-form-label">{{label}}</view>
				<uni-icons v-if="desc" class="gt-form-desc" type="help" size="20" color="#999999" @click="showDesc()"></uni-icons>
			</view>
		</view>
		<view class="gt-form-body">
			<view class="gt-form-content">
				<view class="row mr-15 gt-form-checkbox-item" v-for="(item,index) in list" :key="index" :class="isChecked(item) ? 'gt-form-checkbox-item-active' : ''" @click="changeCheckBox(item.val)">
					<view class="gt-form-checkbox">
						<uni-icons type="checkmarkempty" class="gt-form-checkbox-icon" color="#ffffff" size="10"></uni-icons>
					</view>
					<view class="gt-form-check-text">{{item.val}}</view>
				</view>
			</view>
			<view v-if="error!== false" class="gt-form-error">{{error}}</view>
		</view>

	</view>
	</view>
</template>

<script>
	export default {
		name: "gt-input",
		model: {
			prop: 'value',
			event: 'change'
		},
		props: {
			value: {
				type: [Number, String],
				default: ''
			},
			label: {
				type: String,
				default: ''
			},
			field: {
				type: String,
				default: ''
			},
			desc: {
				type: String,
				default: ''
			},
			required: {
				type: [String, Boolean],
				default: ''
			},
			error: {
				type: [String, Boolean],
				default: false
			},
			list: {
				type: Array,
				default: []
			}
		},
		created() {},
		data() {
			return {
			}
		},
		computed: {
			
		},
		methods: {
			isChecked(item){
				let list = this.value.split(',');
				let index = list.indexOf(item.val);
				if(index !== -1){
					return true;
				}else{
					return false;
				}
			},
			changeCheckBox(e) {
				let list = this.value.split(',');
				let index = list.indexOf(e);
				if(index !== -1){
					list.splice(index,1);
				}else{
					list.push(e);
				}
				let newList = [];
				for(let i in this.list){
					let row = this.list[i];
					if(row.val){
						let key = list.indexOf(row.val);
						if(key !== -1){
							newList.push(row.val);
							list.splice(key,1);
						}
					}
				}
				this.$emit('change', newList.join(','), this.field)
			},
			showDesc() {
				uni.showModal({
					title: this.label,
					content: this.desc,
					showCancel: false
				})
			}
		}
	}
</script>

<style lang="scss">
	.gt-form-checkbox-item{
		cursor: pointer;
		padding:9px 0;
	}
	.gt-form-checkbox{
		width: 14px;height: 14px;border: 1px solid #409eff;margin: 3px 6px 0 0;border-radius: 2px;position: relative;
	}
	.gt-form-checkbox-item-active .gt-form-check-text{
		color:#409eff;
	}
	.gt-form-checkbox-item-active .gt-form-checkbox{
		background-color: #409eff;;
	}
	.gt-form-checkbox-icon{
		display: none;
	}
	.gt-form-checkbox-item-active .gt-form-checkbox-icon{
		line-height: 14px;text-align: center;position: absolute;top: 0;left: 0;display: block;
	}
</style>
